<template>
  <div class="triangle" :style="triangleStyle" @mouseover="onHover" @mouseleave="onLeave"></div>
</template>

<script>
export default {
  props: {
    edgeLength: {
      type: [String, Number],
      default: 40
    },
    flipped: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isHovered: false // 用来控制是否悬浮
    }
  },
  computed: {
    triangleStyle() {
      const edge = typeof this.edgeLength === 'number' ? `${this.edgeLength}px` : this.edgeLength
      const height = `${(this.edgeLength * Math.sqrt(3)) / 2}px` // 等边三角形的高度
      const flip = this.flipped ? 'rotate(180deg)' : 'none'
      const color = this.isHovered ? 'rgb(252, 158, 73)' : 'rgb(73, 157, 252)' // 悬浮时的颜色

      return {
        width: 0,
        height: 0,
        borderLeft: `${parseInt(edge) / 2}px solid transparent`,
        borderRight: `${parseInt(edge) / 2}px solid transparent`,
        borderBottom: `${height} solid ${color}`, // 使用动态颜色
        transform: flip
      }
    }
  },
  methods: {
    onHover() {
      this.isHovered = true // 当鼠标悬浮时，改变颜色
    },
    onLeave() {
      this.isHovered = false // 当鼠标离开时，恢复原色
    }
  }
}
</script>

<style scoped>
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid rgb(73, 157, 252); /* 初始颜色 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: border-bottom-color 0.3s ease; /* 设置颜色变化的过渡效果 */
}

.triangle:hover {
  /* 悬浮时的样式，颜色和边框变化 */
  border-bottom-color: rgb(252, 158, 73); /* 悬浮时的颜色 */
}
</style>
